<!--
* @Description: 关联算法
* @Author: yihua
* @Date: 2023/3/29 12:28
* @LastEditTime: 2023/3/29 12:28
-->
<template>
  <el-dialog v-model="dialogVisible" title="关联算法" width="500px" @close="dialogVisible = false">
    <el-form ref="formPassRef" :rules="formRules" :model="formPass" label-width="120px">
      <el-form-item label="电力" prop="name">
        <div class="formula_container iotInput" id="1" @click="openFormula(1,algorithmInput[0])">
          <span class="formula_content">
            <span class="formula_show"  ref="algorithmInput">
            </span>
          </span>
          <el-tooltip  :content="algorithmArr[0]" placement="top" popper-class="space-auth-status-tip" v-if="algorithmArr[0]">
            <span><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
          </el-tooltip>
          <span v-else><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
        </div>
      </el-form-item>
      <el-form-item label="蒸汽" prop="price">
        <div class="formula_container iotInput" id="2" @click="openFormula(2,algorithmInput[1])">
          <span class="formula_content">
            <span class="formula_show"  ref="algorithmInput">
            </span>
          </span>
          <el-tooltip :content="algorithmArr[1]" placement="top" popper-class="space-auth-status-tip" v-if="algorithmArr[1]">
            <span><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
          </el-tooltip>
          <span v-else><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
        </div>
      </el-form-item>
      <el-form-item label="水" prop="unit">
        <div class="formula_container iotInput" id="3" @click="openFormula(3,algorithmInput[2])">
          <span class="formula_content">
            <span class="formula_show"  ref="algorithmInput">
            </span>
          </span>
          <el-tooltip :content="algorithmArr[2]" placement="top" popper-class="space-auth-status-tip" v-if="algorithmArr[1]">
            <span><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
          </el-tooltip>
          <span v-else><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
        </div>
      </el-form-item>
      <el-form-item label="压缩空气" prop="describe">
        <div class="formula_container iotInput" id="4" @click="openFormula(4,algorithmInput[3])">
          <span class="formula_content">
            <span class="formula_show"  ref="algorithmInput" v-html="algorithmInput[3]">
            </span>
          </span>
          <el-tooltip :content="algorithmArr[3]" placement="top" popper-class="space-auth-status-tip" v-if="algorithmArr[3]">
            <span><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
          </el-tooltip>
          <span v-else><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" class="save" @click="dialogVisible = false"> 确 定 </el-button>
      </div>
    </template>

    <formula ref="formulaFormRef" @changeAlgorithmInput="changeAlgorithmInput" />
  </el-dialog>
</template>
<script setup lang="ts">
  import { reactive , getCurrentInstance ,defineExpose , nextTick,ref } from 'vue';
  type FormInstance = InstanceType<typeof ElForm>;
  import { delHtmlTag } from '@/utils/stringUtils';
  import formula from './formula.vue'
  let dialogVisible = ref(false)

  const formRules = {
    audit_comment: [
      {
        'required': true,
        'message': `请输入驳回意见`,
        'trigger': `blur`
      }, {
        'max': 140,
        'message': `长度不能超过140字`,
        'trigger': `blur`
      }
    ]
  }
  const formPassRef = ref();
  let formPass = reactive({
    'newtext': ``,
    'confirmtext': ``
  });

  let algorithmArr = ref(['','','','']);
  let algorithmInput = ref(['','','','']);
  const changeSubmitFn = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async valid => {
      if (valid) {

      }
    });
    dialogVisible = false
  }

  // 从子组件接收过来的值
  const changeAlgorithmInput = (e) =>{
    console.log('从子组件接收过来的值',e);
    algorithmInput.value[(e.rowNumber -1)] = e.value;
    algorithmArr.value[ (e.rowNumber -1)] = delHtmlTag(e.value);
  }
  const formulaFormRef = ref(null)
  const openFormula = (row) => {
    console.log('row',row);
    formulaFormRef.value && formulaFormRef.value.open(row);
  }

  // 初始化方法
  const open =  (key , row) => {
    dialogVisible.value = true
  };


  defineExpose({open})
</script>